<#include "/layout/header.ftl"/>
<div class="clearfix"></div>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <div class="x_panel">
            <div class="x_content">
                <div class="<#--table-responsive-->">
                    <div class="btn-group hidden-xs" id="toolbar">
                        <@shiro.hasPermission name="shop">
                            <button id="btn_add" type="button" class="btn btn-default" title="新增分类">
                                <i class="fa fa-plus"></i> 新增分类
                            </button>
                        </@shiro.hasPermission>
                        <@shiro.hasPermission name="shop">
                            <button id="btn_delete_ids" type="button" class="btn btn-default" title="删除选中">
                                <i class="fa fa-trash-o"></i> 批量删除
                            </button>
                        </@shiro.hasPermission>
                    </div>
                    <table id="tablelist">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<#include "/layout/footer2.ftl"/>
<!--添加资源弹框-->
<div class="modal fade" id="addOrUpdateModal" tabindex="-1" role="dialog" aria-labelledby="addroleLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="addroleLabel">添加资源链接</h4>
            </div>
            <div class="modal-body">
                <form id="addOrUpdateForm" class="form-horizontal form-label-left" novalidate>
                    <input type="hidden" name="id">
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="name">分类名称: <span
                                    class="required">*</span></label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="name" id="name"
                                   required="required" placeholder="请输入分类名称"/>
                        </div>
                    </div>

                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="type">父级分类: </label>
                        <div class="col-md-6 col-sm-6 col-xs-6">
                            <select id="parentId" name="parent_id" class="form-control col-md-5 col-xs-5">
                                <option value="0" selected="selected">请选择</option>

                            </select>
                        </div>
                    </div>

                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="sort">分类排序: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input type="text" class="form-control col-md-7 col-xs-12" name="sort" id="sort"
                                   placeholder="请输入分类排序"/>
                        </div>
                    </div>
                    <div class="item form-group">
                        <label class="control-label col-md-3 col-sm-3 col-xs-12" for="icon">分类图标: </label>
                        <div class="col-md-6 col-sm-6 col-xs-12">
                            <input accept="image/*" onchange="selectImage(this);" type="file"
                                   class="form-control col-md-7 col-xs-12" name="file"
                                   placeholder="请输入分类图标"/>
                            <img id="image_id" name="image_id" style="width: 100px;height: 150px"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary addOrUpdateBtn">保存</button>
            </div>
        </div>
    </div>
</div>
<!--/添加资源弹框-->
<script>

    function selectImage(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            document.getElementById('image_id').src = evt.target.result;
            image = evt.target.result;
        }
        reader.readAsDataURL(file.files[0]);
    }

    /**
     * 操作按钮
     * @param code
     * @param row
     * @param index
     * @returns {string}
     */

    function operateFormatter(code, row, index) {
        var trId = row.id;
        var operateBtn = [
            '<@shiro.hasPermission name="shop"><a class="btn btn-xs btn-primary btn-update" data-id="' + trId + '"><i class="fa fa-edit"></i>编辑</a></@shiro.hasPermission>',
            '<@shiro.hasPermission name="shop"><a class="btn btn-xs btn-danger btn-remove" data-id="' + trId + '"><i class="fa fa-trash-o"></i>删除</a></@shiro.hasPermission>'
        ];
        return operateBtn.join('');
    }

    $(function () {
        var options = {
            url: "/category/pagelist/",
            getInfoUrl: "/category/{id}",
            updateUrl: "/category/edit",
            removeUrl: "/category/remove",
            createUrl: "/category/add",
            imageid: "image_id",
            columns: [{
                checkbox: true
            }, {
                field: 'name',
                title: '分类名',
                editable: true
            }, {
                field: 'image_id',
                title: '图片',
                editable: true,
                formatter: function (code) {
                    return '<img src="' + code + '" style="width:50px;height:80px" />'
                }
            }, {
                field: 'parent_id',
                title: '父级分类',
                editable: true,
            }, {
                field: 'sort',
                title: '排序',
                editable: true
            }, {
                field: 'operate',
                title: '操作',
                formatter: operateFormatter //自定义方法，添加操作按钮
            }],
            modalName: "分类"
        }
        //1.初始化Table
        $.tableUtil.init(options);
        //2.初始化Button的点击事件
        $.buttonUtil.init(options);

    });
    $("#tablelist").on('load-success.bs.table', function (data) {
        console.log("load success");
        getLevel();
    });

    function getLevel() {
        $("#parentId").empty();
        $("#parentId").append('<option value="0">请选择</option>\n');
        $.ajax({
            type: "get",
            url: "/category/asLevel",
            success: function (json) {
                console.log(json)
                if (json.status == 200) {
                    var parents = json.data;
                    var str = "";
                    for (var i = 0; i < parents.length; i++) {
                        str += ('<option value="' + parents[i].id + '">' + parents[i].name + '</option>');
                        if (parents[i].nodes)
                            for (var j = 0; j < parents[i].nodes.length; j++)
                                str += ('<option value="' + parents[i].nodes[j].id + '">&nbsp;&nbsp;|-' + parents[i].nodes[j].name + '</option>');
                    }
                    $("#parentId").append(str);
                }

            },
            error: $.tool.ajaxError
        });
    }
</script>